<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>JS Console </title>
<link href="styles/js-console.css" rel="stylesheet" />
</head>

<style>

#number
{
  border-width:2px;
  border-color:black;
  border-radious:3px;
  border-style:solid;
  font-family:Consolas;		   
  margin-bottom:5px;
  padding:5px 15px;
}
a
{
color:red;
border:1px solid black;
padding:5px 15px;						
text-decoration:none;	   
display:inline-block;		 
margin: 15px 0;
}

</style>

<body>

<div>
                <div class="input">
                        <label for="tb-first">Width: </label>
                        <input type="text" id="tb-first"/>
                </div>                                                          
                <div class="input">                
                        <label for="tb-second">Height: </label>
                        <input type="text" id="tb-second"/>
                </div>
                <div id="inputbutton">
                        <a href="#" onclick="onButtonClick()">Calc Area</a>
                </div>
        </div>
        <div id="console">
        </div>
        <script src="scripts/js-console.js">          
        </script>                  
        <script>                                                                                                                 

                function onButtonClick() {
                        var width = jsConsole.readFloat("#tb-first");
                        var height = jsConsole.readFloat("#tb-second");
                        
                         if(width >0 && height>0)
				{
                        jsConsole.writeLine("rectangular area is: " + width * height);
                }   
                       else
               {
                 jsConsole.writeLine("Liceto ne moje da byde izchisleno ");
               }	
}			   
                               
          </script>
	</body>

</html>